<!-- 创建时间: 2019年10月28日 星期一 01:32  个人信息组件 -->
<template>
    <div class="PersonInfo_container">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td colspan="2" class="text-center">基础信息</td>
                </tr>
                <tr>
                    <td colspan="2" class="text-center">
                        <img :src="userPhoto" ref="img" />
                        <br />
                        <a href="#" @click.prevent="upPhoto" v-if="!confirmUpPhoto">上传头像</a>
                        <span
                            class="label label-primary"
                            v-if="confirmUpPhoto"
                            @click="savePhoto"
                        >保存</span>
                        <span
                            class="label label-default"
                            v-if="confirmUpPhoto"
                            @click="cancelUpPhoto"
                        >取消</span>
                    </td>
                </tr>
                <tr>
                    <td>姓名</td>
                    <td>{{ userInfo.name}}</td>
                </tr>
                <tr>
                    <td>身份证号</td>
                    <td>{{ userInfo.idNumber}}</td>
                </tr>
                <tr>
                    <td>车辆</td>
                    <td class="addPlate">
                        <span
                            style="width: 17rem;word-break: break-all; margin: auto 0;"
                        >{{ userInfo.licensePlateNumber}}</span>
                        <span>
                            <a href="#" @click.prevent="openMessage" class="btn btn-success">
                                <i class="fa fa-plus" aria-hidden="true"></i>添加车辆
                            </a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td>会员等级</td>
                    <td class="addPlate">
                        <span
                            :class="{'vip':userInfo.grade!=0,'notVip':userInfo.grade==0}"
                        >VIP{{ userInfo.grade }}</span>
                        <span class="grad" ref="grad">
                            <i class="fa fa-star-o" aria-hidden="true" v-for="n in 7" :key="n"></i>
                        </span>
                        <span>
                            <router-link
                                :to="{path:'/PersonalPage/OpenMember',query:{redirect:this.$route.path}}"
                                class="btn btn-success"
                            >
                                <i class="fa fa-user-md" aria-hidden="true"></i>
                                {{ userInfo.grade==0?"开通会员":"会员充值" }}
                            </router-link>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td>会员优惠</td>
                    <td>{{ userInfo.balance}}</td>
                </tr>
                <tr>
                    <td>手机号</td>
                    <td class="addPlate">
                        <span style="margin: auto 0;">{{ userInfo.cellPhoneNumber}}</span>
                        <span>
                            <router-link
                                :to="{path:'/PersonalPage/UpdatePhoneNumber',query:{userInfo:this.userInfo, redirect:this.$route.path}}"
                                class="btn btn-success"
                            >
                                <i class="fa fa-mobile fa-lg" aria-hidden="true"></i>更换手机
                            </router-link>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td>注册时间</td>
                    <td>{{ userInfo.registerTime}}</td>
                </tr>
                <tr>
                    <td colspan="2" class="text-right" style="padding: 0 8px;text-align: right;">
                        <router-link
                            :to="{path:'/PersonalPage/UpdateUserPass',query:{redirect:this.$route.path}}"
                            class="btn btn-success"
                        >
                            <i class="fa fa-wrench" aria-hidden="true"></i>修改密码
                        </router-link>
                    </td>
                </tr>
            </tbody>
        </table>

        <div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <s>
                        <a href="#">拍照或录像</a>
                    </s>
                </li>
                <li class="mui-table-view-cell">
                    <a href="#" @click.prevent="clickUpPhoto">选取现有的</a>
                    <input
                        type="file"
                        ref="upfile"
                        accept="image/*"
                        capture="camera"
                        style="display:none;"
                        @change="upFileChange($event)"
                    />
                </li>
            </ul>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a href="#picture">
                        <b>取消</b>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { MessageBox, Toast, Indicator } from "mint-ui";
import mui from "../../lib/MUI/dist/js/mui.js";

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            // 用户信息
            userInfo: "",
            // 确认上传头像
            confirmUpPhoto: false,
            // 输入框元素
            inputElement: "",
            // 用户头像
            userPhoto: this.$store.getters.getUserPhoto
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        userInfo: function(newval) {
            this.showGradStar(newval.grade);
        }
    },
    //方法集合
    methods: {
        // 设置星号点亮状态，根据用户等级点亮星星
        showGradStar() {
            for (var i = 0; i < this.userInfo.grade; i++) {
                this.$refs.grad.children[i].classList = "fa fa-star";
                this.$refs.grad.children[i].style.color = "#ffc32b";
            }
        },
        // 获取用户所有信息
        getMemberAllInfo() {
            this.$http.post("getMemberAllInfo").then(response => {
                this.userInfo = response.body[0];
            });
        },
        // 用户上传头像，打开选择器
        upPhoto() {
            mui("#picture").popover("toggle");
        },
        // 当用户选择了上传文件时，该方法打开隐藏的 file 类型的输入框
        clickUpPhoto() {
            this.$refs.upfile.click();
        },
        // 将用户选择的头像文件 展示 在页面的头像框内 注意， 该方法并不能保存用户的头像，仅展示
        upFileChange(el) {
            this.inputElement = el;
            var filePath = el.srcElement.files[0];
            if (filePath.size > 3 * 1000 * 1000) {
                mui.alert("文件超出限制大小:3Mb,请重新选择.");
                mui("#picture").popover("toggle");
                el.srcElement.value = "";
                return;
            }
            var reader = new FileReader();
            reader.readAsDataURL(filePath);
            var __this = this;
            reader.onload = function(e) {
                __this.$refs.img.src = this.result;
                mui("#picture").popover("toggle");
                __this.confirmUpPhoto = true;
            };
        },
        // 上传用户的头像，该方法则是保存用户的头像信息到后端
        savePhoto() {
            Indicator.open({
                text: "图像上传中...",
                spinnerType: "fading-circle"
            });
            var src = this.$refs.img.src;
            this.$http
                .post("saveUserPhoto", {
                    Photo: src
                })
                .then(response => {
                    if (response.bodyText == "success") {
                        Indicator.close();
                        localStorage.setItem("userPhoto", src);
                        this.$store.commit("setUserPhoto", src);
                        this.confirmUpPhoto = false;
                        this.$store.commit("setUpdateStatus", 1);
                        this.seccessInfo();
                    }
                });
        },
        // 取消头像上传，并将头像还原
        cancelUpPhoto() {
            this.inputElement.srcElement.value = "";
            this.confirmUpPhoto = false;
            this.$refs.img.src = this.$store.getters.getUserPhoto;
        },
        // 添加车辆按钮
        openMessage() {
            var message =
                "尊敬的 " +
                this.userInfo.name +
                " 先生/女士\n你好. 我司规定，" +
                "每一位用户可免费享有一个车辆录入, 若你要增加车辆录入,\n将会产生额外费用,详细信息可到‘关于’中查看或在支付页面得知。\n 你是否要继续操作?";
            MessageBox.confirm(message).then(
                action => {
                    this.$router.push({
                        path: "/PersonalPage/UserAddPlate",
                        query: {
                            redirect: this.$route.path,
                            userInfo: this.userInfo
                        }
                    });
                },
                cancel => {}
            );
        },
        // 个人中心所有有操作成功后的一个提示框 -- 公共方法
        seccessInfo() {
            if (
                this.$store.getters.getUpdateStatus == 1 ||
                sessionStorage.getItem("setUpdateStatus") == 1
            ) {
                Toast({
                    message: "更新成功",
                    position: "top",
                    duration: 2000
                });
                this.$store.commit("setUpdateStatus", 0);
                sessionStorage.removeItem("setUpdateStatus");
            }
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.getMemberAllInfo();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.showGradStar();
        mui.init({
            swipeBack: true //启用右滑关闭功能
        });
        this.seccessInfo();
    }
};
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.PersonInfo_container {
    margin-top: 45px;
    position: absolute;
    width: 100%;

    table {
        tr {
            td:nth-child(1) {
                min-width: 37px;
                text-align: center;
                vertical-align: middle;
                font-size: 16px;
                color: brown;
                font-family: cursive;
                padding: 4px;
                font-weight: 700;
            }

            td:nth-child(2) {
                text-align: left;
                vertical-align: middle;

                span:nth-child(2) {
                    a {
                        padding: 0px 12px;
                        line-height: 32px;
                        color: white;
                    }
                }
            }

            td:nth-child(2):not(.addPlate) {
                color: darkgrey;
                font-size: 15px;
                letter-spacing: 6px;
            }
        }
    }

    img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
    }

    img[lazy="loading"] {
        width: 120px;
        height: 120px;
        margin: auto;
    }

    a {
        text-decoration: none;
    }

    .addPlate {
        display: flex;
        justify-content: space-between;
        .grad {
            margin: auto;
            margin-left: 1rem;
        }
        .vip {
            margin: auto 0;
            color: darkorange;
            font-weight: 900;
            font-family: cursive;
            font-size: 15px;
            letter-spacing: 1px;
        }
        .notVip {
            margin: auto 0;
            color: darkgray;
            font-weight: 900;
            font-family: cursive;
            font-size: 15px;
            letter-spacing: 1px;
        }
    }
}

.mint-toast-text {
    font-size: 16px;
    display: block;
    text-align: center;
}
</style>
